<!-- 预览时,生成不同类型表单 -->
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">


    <div v-if="widget.options.show == true">
        <div v-if="parentContainer">
            <!-- 显示名称 -->
            <el-form-item v-if="widget.type != 'block'  && widget.type != 'tabs'"
                          :label="getLable(widget)"
                          :label-width="getLableWidth(widget)"
                          :style="widget.options.customStyle"
                          :prop="widget.model" :rules="widget.rules"

                          :class="{'is_req': widget.options.required,'display':'block',[widget.options.customClass]: widget.options.customClass?true: false}"

            >
                <generate-element-item :strutAll="strutAll"
                                       :blanks="blanks"
                                       :taskId="taskId"
                                       :is-table="false"
                                       :widget="widget"
                                       :models_temp="models_temp"
                                       v-model="dataModel" :models.sync="dataModels" :remote="remote">

                    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                        <slot :name="blank.name" :model="scope.model"></slot>
                    </template>
                </generate-element-item>
            </el-form-item>

            <div v-else-if="widget.type == 'block'"
                 :label="getLable(widget)"


                 :prop="widget.model" class="block-show">
                <!--        区域块标题-->
                <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                <generate-element-item :blanks="blanks" :is-table="false"
                                       :taskId="taskId"
                                       :widget="widget"
                                       :models_temp="models_temp"
                                       :strutAll="strutAll"
                                       v-model="dataModel"
                                       :path="path"
                                       :models.sync="dataModels"
                                       :remote="remote">
                    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                        <slot :name="blank.name" :model="scope.model"></slot>
                    </template>
                </generate-element-item>
            </div>

            <div v-else-if="widget.type == 'card'" :label="getLable(widget)"
                 :prop="widget.model" class="block-show">
                <!--        卡片标题-->
                <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                <generate-element-item :blanks="blanks" :is-table="false"
                                       :widget="widget"
                                       :taskId="taskId"
                                       :models_temp="models_temp"
                                       :strutAll="strutAll"
                                       v-model="dataModel"
                                       :path="path"
                                       :models.sync="dataModels"
                                       :remote="remote">
                    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                        <slot :name="blank.name" :model="scope.model"></slot>
                    </template>
                </generate-element-item>
            </div>


            <div v-else-if="widget.type == 'tabs'"

                 :label="getLable(widget)"


                 :prop="widget.model" class="block-show">
                <!--        tabs块标题-->
                <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                <generate-element-item :blanks="blanks"
                                       :widget="widget"
                                       :taskId="taskId"
                                       :models_temp="models_temp"
                                       :strutAll="strutAll"
                                       v-model="dataModel"
                                       :path="path"
                                       :models.sync="dataModels"
                                       :remote="remote">
                    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                        <slot :name="blank.name" :model="scope.model"></slot>
                    </template>
                </generate-element-item>
            </div>
            <div v-else-if="widget.type == 'collapse'"
                 :label="getLable(widget)"


                 :prop="widget.model" class="block-show">
                <!--        折叠面板标题-->
                <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                <generate-element-item :blanks="blanks"
                                       :widget="widget"
                                       :taskId="taskId"
                                       :models_temp="models_temp"
                                       :strutAll="strutAll"
                                       v-model="dataModel"
                                       :path="path"
                                       :models.sync="dataModels"
                                       :remote="remote">
                    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                        <slot :name="blank.name" :model="scope.model"></slot>
                    </template>
                </generate-element-item>
            </div>


        </div>
        <div v-else>

            <el-col :span="widget.options.span">
                <!-- 显示名称 -->

                <el-form-item v-if="widget.type != 'block'  && widget.type != 'tabs'"
                              :label="getLable(widget)"
                              :taskId="taskId"
                              :label-width="getLableWidth(widget)"
                              :style="widget.options.customStyle"
                              :prop="widget.model" :rules="widget.rules"

                              :class="{'is_req': widget.options.required,'is_req': widget.options.required,'display':'block',[widget.options.customClass]: widget.options.customClass?true: false}"

                >
                    <generate-element-item :strutAll="strutAll"
                                           :blanks="blanks"
                                           :taskId="taskId"
                                           :is-table="false"
                                           :widget="widget"
                                           :models_temp="models_temp"
                                           v-model="dataModel" :models.sync="dataModels" :remote="remote">

                        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.model"></slot>
                        </template>
                    </generate-element-item>


                </el-form-item>

                <div v-else-if="widget.type == 'block'"
                     :label="getLable(widget)"

                     :taskId="taskId"
                     :prop="widget.model" class="block-show">
                    <!--        区域块标题-->
                    <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                    <generate-element-item :blanks="blanks" :is-table="false"
                                           :widget="widget"
                                           :taskId="taskId"
                                           :models_temp="models_temp"
                                           :strutAll="strutAll"
                                           v-model="dataModel"
                                           :path="path"
                                           :models.sync="dataModels"
                                           :remote="remote">
                        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.model"></slot>
                        </template>
                    </generate-element-item>
                </div>

                <div v-else-if="widget.type == 'card'" :label="getLable(widget)"
                     :prop="widget.model" class="block-show">
                    <!--        卡片标题-->
                    <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                    <generate-element-item :blanks="blanks" :is-table="false"
                                           :widget="widget"
                                           :taskId="taskId"
                                           :models_temp="models_temp"
                                           :strutAll="strutAll"
                                           v-model="dataModel"
                                           :path="path"
                                           :models.sync="dataModels"
                                           :remote="remote">
                        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.model"></slot>
                        </template>
                    </generate-element-item>
                </div>


                <div v-else-if="widget.type == 'tabs'"

                     :label="getLable(widget)"


                     :prop="widget.model" class="block-show">
                    <!--        tabs块标题-->
                    <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                    <generate-element-item :blanks="blanks"

                                           :widget="widget"
                                           :taskId="taskId"
                                           :models_temp="models_temp"
                                           :strutAll="strutAll"
                                           v-model="dataModel"
                                           :path="path"
                                           :models.sync="dataModels"
                                           :remote="remote">
                        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.model"></slot>
                        </template>
                    </generate-element-item>
                </div>
                <div v-else-if="widget.type == 'collapse'"
                     :label="getLable(widget)"


                     :prop="widget.model" class="block-show">
                    <!--        折叠面板标题-->
                    <span class="title">{{widget.options.showTitle?widget.name:""}}</span>
                    <generate-element-item :blanks="blanks"
                                           :widget="widget"
                                           :taskId="taskId"
                                           :models_temp="models_temp"
                                           :strutAll="strutAll"
                                           v-model="dataModel"
                                           :path="path"
                                           :models.sync="dataModels"
                                           :remote="remote">
                        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.model"></slot>
                        </template>
                    </generate-element-item>
                </div>


            </el-col>
        </div>

    </div>

</template>

<script>
    import GenerateElementItem from './GenerateElementItem'
    import {findTableColumns} from './router/utils.js'
    import {
        validateDate,
        validateEMail,
        validateIdNo,
        validatePhone,
        validatePwd,
        validateReg,
        validateURL
    } from './validate.js'
    import {getLable} from './js/formUtils.js'

    export default {
        components: {
            GenerateElementItem
        },
        props: ['widget', 'models', 'rules', 'remote', 'blanks', 'models_temp', 'strutAll', 'path', 'index', 'parentContainer','taskId'],
        created() {


        },
        data() {
            return {

                dataModel: this.models[this.widget.model] == null ? "" : this.models[this.widget.model],
                dataModels: this.models == null ? "" : this.models
            }
        },
        mounted() {
            if (this.widget.tableColumns) {
                var tableColumns = this.widget.tableColumns;

                for (var i = 0; i < tableColumns.length; i++) {
                    var widgetNode = tableColumns[i]
                    if (widgetNode.rules) {
                        for (var j = 0; j < widgetNode.rules.length; j++) {
                            widgetNode.rules[j].validator = this.validatePass;
                        }
                    }

                }
            }
            if (this.widget.tabColumns) {
                var tableColumns = this.widget.tabColumns;

                for (var i = 0; i < tableColumns.length; i++) {
                    var widgetNode = tableColumns[i]
                    if (widgetNode.rules) {
                        for (var j = 0; j < widgetNode.rules.length; j++) {
                            widgetNode.rules[j].validator = this.validatePass;
                        }
                    }

                }
            }
            //VUE 嵌套的 手工赋值下 要不不生效
            if (this.widget.rules) {

                var rules = this.widget.rules;
                for (let i = 0; i < rules.length; i++) {
                    rules[i].validator = this.validatePass;
                }
            }
        },
        methods: {

            getLable: function (element) {
                return getLable(element);
            },
            getLableWidth: function (element) {
                if (element){
                    if (element.options.labelWidth){
                        return element.options.labelWidth + 'px';
                    }else{
                        return  "100px"
                    }
                }

            },
            addBlockItem() {
                alert(1)
            },
            getClass(data) {
                var isRed = data.options.showRed;
                if (isRed) {
                    return "vvvv";
                }
            },

            validatePass(rule, info, callback) {
                var type = rule.customerType;
                var length = rule.val;
                if (type == "nonull" && info.length == 0) {
                    callback(new Error(rule.msg));
                } else if (type == "isnum" && !/^[0-9]*$/.test(info) && info.length > 0) {
                    callback(new Error(rule.msg));
                } else if (type == "min" && info.length < length) {
                    callback(new Error(rule.msg));
                } else if (type == "max" && info.length > length) {
                    callback(new Error(rule.msg));
                } else if (type == "phone" && info.length > 0 && !validatePhone(info)) {
                    callback(new Error(rule.msg));
                } else if (type == "idNumber" && info.length > 0 && !validateIdNo(info)) {
                    callback(new Error(rule.msg));
                } else if (type == "email" && info.length > 0 && !validateEMail(info)) {
                    callback(new Error(rule.msg));
                } else if (type == "url" && info.length > 0 && !validateURL(info)) {
                    callback(new Error(rule.msg));
                } else if (type == "pwd" && info.length > 0 && !validatePwd(info)) {
                    callback(new Error(rule.msg));
                } else if (type == "date" && info.length > 0 && !validateDate(info)) {
                    callback(new Error(rule.msg));
                }
                //regular
                else if (type == "regular" && info.length > 0 && !validateReg(length, info)) {
                    callback(new Error(rule.msg));
                } else if (type == "dateRule") {
                    var currentVal = this.models[this.widget.model]
                    var otherVal = this.models[this.widget.options.ckeckedDatevalidType]
                    if (currentVal && otherVal) {
                        var dateValidRule = this.widget.options.dateValidRule
                        var otherName = '';
                        var operateName = '';
                        if (!otherVal) {
                            callback();
                        }
                        if (dateValidRule) {
                            var strutAll = this.strutAll
                            var list = strutAll.list
                            var otherNodes = [];
                            for (var i = 0; i < list.length; i++) {
                                var node = list[i];
                                if (node.model == this.widget.options.ckeckedDatevalidType) {
                                    otherName = node.name;
                                }
                            }

                            var dateValidRuleResult = false;
                            if (">=" == dateValidRule) {
                                operateName = "大于等于";
                                dateValidRuleResult = (currentVal - otherVal >= 0);
                            } else if ("<" == dateValidRule) {
                                operateName = "小于";
                                dateValidRuleResult = (currentVal - otherVal < 0);
                            } else if ("==" == dateValidRule) {
                                operateName = "等于";
                                dateValidRuleResult = (currentVal - otherVal == 0);
                            } else if ("<=" == dateValidRule) {
                                operateName = "小于等于";
                                dateValidRuleResult = (currentVal - otherVal <= 0);
                            }
                            if (!dateValidRuleResult) {
                                callback(new Error("当前日期应该" + operateName + otherName + "的日期"));
                            } else {
                                callback();
                            }


                        }
                    } else {
                        var field = rule.field
                        var pathDot = rule.field.split(".")
                        if (pathDot) {
                            var blockId = pathDot[0];
                            var index = pathDot[1];
                            var modelId = pathDot[2];
                            var node = currentVal[index]
                            var operateName = '';
                            var subNodes = findTableColumns(this.strutAll.list, modelId);
                            if (subNodes) {

                                for (var i = 0; i < subNodes.length; i++) {
                                    if (subNodes[i].model == modelId) {
                                        var subNode = subNodes[i];

                                        var ckeckedDatevalidType = subNode.options.ckeckedDatevalidType
                                        var dateValidRule = subNode.options.dateValidRule
                                        var others = findTableColumns(this.strutAll.list, ckeckedDatevalidType);
                                        for (var j = 0; j < others.length; j++) {
                                            if (others[j].model == ckeckedDatevalidType) {
                                                otherName = others[j].name
                                            }

                                        }

                                        var otherVal = this.dataModel[index][ckeckedDatevalidType]
                                        if (otherVal) {

                                        }
                                        var dateValidRuleResult = false;
                                        if (">=" == dateValidRule) {
                                            operateName = "大于等于";
                                            dateValidRuleResult = (info - otherVal >= 0);
                                        } else if ("<" == dateValidRule) {
                                            operateName = "小于";
                                            dateValidRuleResult = (info - otherVal < 0);
                                        } else if ("==" == dateValidRule) {
                                            operateName = "等于";
                                            dateValidRuleResult = (info - otherVal == 0);
                                        } else if ("<=" == dateValidRule) {
                                            operateName = "小于等于";
                                            dateValidRuleResult = (info - otherVal <= 0);
                                        }
                                        if (!dateValidRuleResult) {
                                            callback(new Error("当前日期应该" + operateName + otherName + "的日期"));
                                        } else {
                                            callback();
                                        }
                                    }
                                }


                            }
                        }
                    }

                } else if (rule.isregexp && !/^[^%'"?!^#%*/]*$/.test(info)) {
                    callback(new Error(rule.msg));
                } else if (rule.isnumeng_ && !/^[0-9a-zA-Z_]*$/.test(info.value)) {
                    callback(new Error(rule.msg));
                } else if (rule.maxlength && !info.value === "" && info.value.length > rule.maxlength) {
                    callback(new Error(rule.msg));
                } else {
                    callback();
                }
            }
        },
        watch: {
            dataModel: {
                deep: true,
                immediate: true,
                handler(val) {
                    try {
                        this.models[this.widget.model] = val
                        this.$emit('update:models', {
                            ...this.models,
                            [this.widget.model]: val
                        })
                    } catch (e) {

                    }

                }
            },
            models: {
                deep: true,
                handler(val) {
                    try {
                        this.dataModel = val[this.widget.model]
                        this.dataModels = val//改子表单和区域数据会造成最外层表单数据的改变
                    } catch (e) {

                    }

                }
            },
            dataModels: {
                deep: true,
                handler(val) {
                    try {
                        this.$emit('update:models', val)
                    } catch (e) {

                    }

                }
            }

        }
    }
</script>
<style>
    .block-h3 {
        padding-left: 0px;
        margin-bottom: 15px;
    }

    .block-show {
        margin-left: 5%;
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
